﻿@{
    ViewBag.Title = "Role Users";
}

<h2>Role Administration</h2>
<p style="width:80%; padding-left:20px;">
Role administration is presented to allow assignment of users to a role, and creation of role.
</p>
<div id="addGroup" >Create Role</div>
<h3>Current Roles</h3>
<form >
 <table style="border: 1px solid #000000; width:450px;">
 <thead >
 <tr>
      <th colspan="2">Current Roles</th>
    </tr>
 </thead>
 <tr>
    <td>
        <ul>
        @foreach (var d in Roles.GetAllRoles())
                { 
         <li> @d </li> 
                }
        </ul>
    </td>
 </tr>
                
</table>
 <script type="text/javascript">
    $(function () {
        $("#addGroup").button();
        $("#RoleAdmin").dialog({
            autoOpen: false,
            resizable: false,
            height: 380,
            width: 450,
            modal: true,
            buttons: {
                'Save': function () {
                    var role = $("#roleName").val();
                    var viewModel2 =
                                {
                                    Role: ko.observableArray([]),
                                    add: function () {}
                                };
                                viewModel2.Role.push({ Roles: role });
                    var d = ko.toJSON(viewModel2.Role);
                    var a = $.parseJSON(d);

                    $.ajax({
                        url: '/Account/CreateRole', type: "POST",
                        data: JSON.stringify(a),
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {}
                    });
                    $("#roleName").val("");
                     $(this).dialog('close');
                },
                 Cancel: function () {
                     $("#roleName").val("");
                    $(this).dialog('close');
                }
            }
        });
        $("#addGroup").click(function () {
            //Show Dialog
            $("#RoleAdmin").dialog("open");
        });
    });
    function AddRole() { }
</script>
<div id="RoleAdmin" title="Create Role">
    <table style="width:100%;">
        <tr>
            <td>Role:
            </td>
            <td>
                <input name="roleName" id="roleName" type="text" />
            </td>
        </tr>
    </table>
    <br />
    <table style="width:100%;">
    <tr style="vertical-align:top;">
        <td><div class="remember"></div></td>
        <td style="padding-left:10px; font-size:11px;">
        To add a role to the system simply type the name of the role in the text area provided.
        <br />
    I.E. Please ensure that the role name is different from the current roles.
    When you are complete click the save button to submit it to the system database.
    Clicking cancel will reset the form and close the dialog.</td>
    </tr>
    </table>
</div>
</form>
<h3>User to Role</h3>
<form >
        <div style="border: 1px solid #000000; width:450px;">
        <table style="width:450px; style="border: 1px solid #000000;"" >
            <thead >
                <tr >
                    <th>User</th>
                    <th>E-Mail</th>
                    <th>Role</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind='template: { name: "UserGroupRowTemplate", foreach: RoleUsers }'></tbody>
        </table>
        </div>
</form>
<script type="text/javascript">
    $(function () {

        $("input:checkbox").change(function () {
            if (this.checked) {
                var checked = this.value;
                $("input:checkbox").each(function () {
                    if (this.value == checked) {
                    } else {
                        $(this).attr("disabled", true);
                    }
                })
            } else { $("input:checkbox").each(function () { $("input:checkbox").removeAttr("disabled"); }) }
        });

        $("#editUserDialog").dialog({
            autoOpen: false,
            resizable: false,
            height: 500,
            width: 450,
            modal: true,
            buttons: {
                'Save': function () {
                    //
                    var role = "";
                    $("input:checkbox").each(function () {
                        if (this.checked) { role = this.value; }
                    });
                    var userName = $("#username").val();
                    var email = $("#email").val();
                    var oldrole = $("#oldrole").val();
                  //  alert(userName + email + oldrole);
                    var UserGroupViewModel =
                                {
                                    UserGroup: ko.observableArray([]),
                                    add: function () { }
                                };
                    UserGroupViewModel.UserGroup.push({ UserName: userName, Email: email, Roles: role, OldRole: oldrole });
                    var d = ko.toJSON(UserGroupViewModel.UserGroup);
                    var a = $.parseJSON(d);
                    $.ajax({
                        url: '/Account/AssignUserToGroup', type: "POST",
                        data: JSON.stringify(a),
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) { }
                    });
                    //  $(this).dialog('close');
                },
                Cancel: function () {
                    $("input:checkbox").each(function () { $("input:checkbox").removeAttr("disabled"); $(this).removeAttr("checked"); });
                    $(this).dialog('close');
                }
            }
        });
    });

    function EditUser(userGroup) {
        $("#username").text(userGroup.UserName);
        $("#email").text(userGroup.Email);
        $("#oldrole").text(userGroup.Role);
        //Set the current role
        $("input:checkbox").each(function () {
            if (this.value == userGroup.Role) { this.checked = true; } else { $(this).attr("disabled", true); }
        });
        $("#editUserDialog").dialog("open");
     }
</script>
 <script type="text/html" id="UserGroupRowTemplate">
    <tr>
        <td style="background-color:#fff;"><span data-bind="text: UserName" ></span></td>
        <td style="background-color:#fff;"><span data-bind="text: Email" ></span></td>
        <td style="background-color:#fff;"><span data-bind="text: Role" ></span></td>
        <td style="background-color:#fff;"><div class="deleteButton"  data-bind=" click: function() { EditUser($data) }" >Edit</div></td>
    </tr>
</script>
<div id="editUserDialog" title="Reasign Role to User">
<label  id="oldrole"/>
   <table style="width:100%;">
   <thead>
   <tr>
      <th colspan="2">User</th>
    </tr>
    </thead>
    <tr >
        <td style="width:200px; font-size:11px; font-weight:normal;">User Name:</td>
        <td style=" font-size:12px; font-weight:bold;"><label id="username" /></td>
    </tr>
    <tr>
        <td style="width:200px; font-size:11px; font-weight:normal;">E-Mail:</td>
        <td style=" font-size:12px; font-weight:bold;"><label id="email" /></td>
    </tr>
   </table>
   <table style="width:100%;">
 <thead>
  <tr>
      <th colspan="2">Roles</th>
    </tr>
    </thead>
 @foreach (var d in Roles.GetAllRoles())
                { 
                    <tr><td style="width:200px; font-size:11px; font-weight:normal;">
                        @Html.Label("", d)
                    </td>
                    <td>
                         <input type="checkbox"  name="UserRoles" value="@d" /> 
                        </td>
                    </tr>
                }
 </table>
   <br />
   <table style="width:100%;">
    <tr style="vertical-align:top;">
        <td><div class="remember"></div></td>
        <td style="padding-left:10px; font-size:11px;">
        To assign a role to a user select the role that you wish to assign.
        <br />
    I.E. Remember that a use can only be assigned to one role, the system allow a single role for a user, that is why the role options are blocked when a 
    coice is make, to change the role unselect the role to open the role options again. When you are complete simply click the save button to submit to the system database.</td>
    </tr>
    </table>
</div>
<p style="width:80%; padding-left:20px;">

</p>
<script type="text/javascript">
    $(function () {
        $("#addGroup").button();
        
    });
    function addgroup() { 
    //Make ajax call to add role

        //Get all groups on load event

     }
</script>
<script type="text/javascript">
        //Create the viewmodel
    var viewModel =
        {
            RoleUsers: ko.observableArray([]),
            add: function () {
                this.RoleUsers.push({ UserName: "", Email: "" });
            }
        };

        ko.dependentObservable(function () {
            $.ajax({
                url: '/Account/GetUserGroups', type: "GET",
                dataType: 'json',
                data: {},
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    viewModel.RoleUsers(data);
                }
            });
        }, viewModel);
        ko.applyBindings(viewModel);
        $("form").validate({ submitHandler: function () { viewModel.save() } });

        
       
        

        $(function () { $(".button").button(); });
        function test() {
        }

</script>
 
